<template>
  <div>
    <section class="loginWap">
      <p class="wapTopTitle">会员登录</p>
      <div class="loginWapInfo" :class="{'none':textCheck==true}">
        <div class="item" :class="{none:!nameCheck}" @click="clickOnA">
          <p class="title" :class="{on:onClickA}">电子邮箱地址：</p>
          <p><input type="text" name="" :class="{on:onClickA}" v-model="name" placeholder=""></p>
        </div>
        <div class="item" :class="{none:!passwordCheck}" @click="clickOnB">
          <p class="title" :class="{on:onClickB}">密码：</p>
          <p><input type="password" :class="{on:onClickB}" name="" @keyup.enter="clickLogin" v-model="password" placeholder=""></p>
        </div>
        <div class="clickBox">
          <button @click="clickLogin">登录</button>
          <router-link tag="button"  to="/register">立即注册</router-link>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import axios from 'axios'
import {Login} from '@/config/api.js'
export default {
  name: 'hello',
  data() {
    return {
      name: '',
      password: '',
      textCheck:false,
      onClickA:false,// 点击当前改变颜色-账号
      onClickB:false// 点击当前改变颜色-密码
    }
  },
  computed:{
    allCheck: function() {
      if (this.nameCheck && this.passwordCheck) {
        return true
      } else {
        return false
      }
    },
    nameCheck() {
      if (this.Input(this.name)) {
        return true
      } else {
        return false
      }
    },
    passwordCheck() {
      if (this.Input(this.password)) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    clickText(){
      if(this.allCheck){
        return true
      }else{
        this.textCheck=true
        return false
      }
    },
    async clickLogin() {

      if (this.clickText()) {

        let name = this.name
        let password = this.password

        let date = {
            "grant_type": "password",
            "client_id": "app",
            "client_secret": "8BAk3G10$2EWnN9Frg0SdOIovjQXXGS91gj3waZn",
            "scope": "app",
            "username": name,
            "password": password
        }
        this.$store.dispatch("isLoading",true)
        await Login(date).then(function(reg){
            let token = reg.data.access_token
            var arr = token.split('');
            var passToken = "";
            for (var i = 0; i < token.length; i++) {
              passToken += arr[i].charCodeAt();
              passToken += "/";
            }
            var lastToken = passToken.substring(0, passToken.length - 1)
            var d = new Date();
            d.setTime(d.getTime() + (604800000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = "login" + "=" + lastToken + "; " + expires;
            this.$store.dispatch("loginsync",token);
            //window.location.reload();
            console.log('登录成功')
        }.bind(this)).catch(function(err){
          alert(err.data.message)
        })
        this.$store.dispatch("isLoading",false)
        this.$router.push({ path: '/'})
        
      } else {
        alert('请输入账号密码！')
      }

    },
    //关闭登录窗
    closeLogin(){
      this.$store.dispatch("closeloginBox");
    },
    // 改变输入框当前样式
    clickOnA(){
      this.onClickA=true
      this.onClickB=false
    },
    clickOnB(){
      this.onClickB=true
      this.onClickA=false
    }

  }
}

</script>
